<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0px;
    }

    .container {
      width: 1002px;
      height: 1500px;
      border: 1px solid #ddd;
    }

    .container .main {
      width: 1000px;
      /* 父元素如果没有宽高，就会被子元素撑起来,如果父元素给了相应的高，就不会出现盒子塌陷的问题，如果没有给，那么就直接清除浮动就会解决这个问题 */
      /* 边框也是盒子的一部分 */
      border: 1px solid blue;
    }

    .container .main .main-1 {
      width: 300px;
      height: 300px;
      background-color: blueviolet;
      float: left;
    }

    .container .main .main-2 {
      width: 690px;
      height: 298px;
      background-color: red;
      float: right;
      border: 1px solid blueviolet;
    }

    .clear {
      clear: both;
    }

    .container .column {
      width: 1000px;
      border: 1px solid palegoldenrod;
    }

    .container .column .column-1 {
      margin-right: 20px;
      width: 300px;
      height: 300px;
      background-color: blueviolet;
      float: left;
    }

    .container .column .column-2 {
      margin: 0px 20px;
      width: 300px;
      height: 300px;
      background-color: indianred;
      float: left;
    }

    .container .column .column-3 {
      width: 300px;
      height: 300px;
      background-color: khaki;
      float: right;
    }

    /* 可以利用伪元素来清除浮动， */
    .cleatfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .more {
      width: 1000px;
      border: 1px solid indianred;
      background-color: aqua;
    }

    .more ul {
      list-style: none;
    }

    .more ul li {
      width: 190px;
      height: 300px;
      border: 1px solid saddlebrown;
      float: left;
      /* background-color: sandybrown; */
    }
    .test {
      border: 1px solid #ddd;
    }
    .test .test1 {
      /* width: 100px; */
      border: 1px solid lightskyblue;
      float: left;
    }
    .sd {
      /* display: inline-block; */
      width: 200px;
      float: left;
    }
  </style>

  <body>
    <div class="container">
      <h3>左右两列布局：一个左浮动，一个右浮动</h3>
      <div class="main cleatfix">
        <div class="main-1"></div>
        <div class="main-2"></div>
        <!-- <div class="clear"></div> -->
      </div>
      <h3>
        左中右三列式布局:两种布局方式：三个都添加左浮动，或者最后一个添加右浮动
      </h3>
      <div class="column cleatfix">
        <div class="column-1"></div>
        <div class="column-2"></div>
        <div class="column-3"></div>
        <!-- <div class="clear"></div> -->
      </div>
      <div class="more cleatfix">
        <h3>多行，多列布局</h3>
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="test cleatfix">
        <span class="sd">sdsad</span>
        <div class="test1">werefewf</div>
      </div>
      <div class="test cleatfix">
        <div class="test1">weewcs</div>
      </div>
    </div>
  </body>
</html>
